---
# title: "Scale"
title: "缩放"
# description: "Utilities for scaling elements with transform."
description: "用于缩放元素的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/scale'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用

<!-- Control the scale of an element by first enabling transforms with the `transform` utility, then specifying the scale using the `scale-{percentage}`, `scale-x-{percentage}`, and `scale-y-{percentage}` utilities. -->
控制元素的缩放，首先使用 `transform` 功能启用变换，然后使用 `scale-{百分比}`、`scale-x-{百分比}` 和 `scale-y-{百分比}` 功能类指定缩放比例。

```html fuchsia
<template preview>
  <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
    <div class="w-16 h-16 bg-fuchsia-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 scale-75 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-fuchsia-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 scale-100 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-fuchsia-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 scale-125 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-fuchsia-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 scale-150 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
  </div>
</template>

<img class="transform **scale-75** ...">
<img class="transform **scale-100** ...">
<img class="transform **scale-125** ...">
<img class="transform **scale-150** ...">
```

<!-- Note that because Tailwind implements transforms using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), **the transform utilities are not supported in older browsers like IE11**. If you need transforms for your project and need to support older browsers, [add your own utilities](/docs/adding-new-utilities) or other custom CSS. -->
请注意，因为 Tailwind 使用[ CSS 自定义属性](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)来实现变换，**变换功能不支持旧的浏览器，如 IE11**。如果您的项目需要变换，并且需要支持旧的浏览器，[添加您自己的功能类](/docs/adding-new-utilities)或其他自定义 CSS。

<!-- ## Responsive

To control the scale of an element at a specific breakpoint, add a `{screen}:` prefix to any existing scale utility. For example, use `md:scale-75` to apply the `scale-75` utility at only medium screen sizes and above. -->
## 响应式

要在特定的断点处控制元素的比例，请在任何现有的缩放功能类中添加 `{screen}:` 前缀。例如，使用 `md:scale-75` 来应用 `scale-75` 功能类，只适用于中等尺寸以上的屏幕。

```html
<div class="transform scale-100 **md:scale-75**"></div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

### Scale values

<!-- By default Tailwind provides ten general purpose scale utilities. You change, add, or remove these by editing the `theme.scale` section of your Tailwind config. -->
默认情况下，Tailwind 提供了 10 个通用的 scale 功能类。您可以通过编辑您的 Tailwind 配置的 `theme.scale` 部分来改变，添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      scale: {
        '0': '0',
+       '25': '.25',
        '50': '.5',
        '75': '.75',
        '90': '.9',
-       '95': '.95',
        '100': '1',
-       '105': '1.05',
-       '110': '1.1',
        '125': '1.25',
        '150': '1.5',
+       '200': '2',
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于定制默认主题的信息。

<!-- ### Variants -->
### 变体
<Variants plugin="scale" />

<!-- ### Disabling -->
### 禁用
<Disabling plugin="scale" />
